<template>
  <div class="zhuanj">
    专辑推荐
  </div>
  <div class="zjlist">
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=387002062094336&type=5&mediaId=moments&pageCode=120000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E7%BA%A2%E8%89%B2%E4%B9%A6%E4%BF%A1.png" alt="">
      <p>红色书信</p>
      </a>
    </div>
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=20457651999671296&type=20&mediaId=moments&pageCode=102007000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E4%BA%BA%E6%BA%90%E6%98%9F%E7%90%83.jpeg
" alt="">
      <p>人源星球-纯干货职场秘笈-纯干货职场秘笈</p>
      </a>
    </div>
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=1417060221287284738&type=5&mediaId=moments&pageCode=120000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E7%BE%8A%E8%84%82%E7%90%83.png" alt="">
      <p>羊脂球</p>
      </a>
    </div>
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=24132047562916864&type=5&mediaId=moments&pageCode=120000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E5%90%8D%E8%91%97%E5%AF%BC%E8%AF%BB%E4%B9%8B%E3%80%8A%E9%B2%81%E6%BB%A8%E9%80%8A%E6%BC%82%E6%B5%81%E8%AE%B0%E3%80%8B.jpeg" alt="">
      <p>名著导读之《鲁滨逊漂流记</p>
      </a>
    </div>
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=21010518916514816&type=5&mediaId=moments&pageCode=120000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E6%9E%97%E6%AD%8C%E7%9A%84%E6%B7%B1%E5%A4%9C%E7%94%B5%E5%8F%B0.jpeg" alt="">
      <p>林歌的深夜电台 100个晚安故事</p>
      </a>
    </div>
    <div class="zjitem">
      <a href="https://h5.tingdao.com/activity/sharev3?cid=22003613901046784&type=5&mediaId=moments&pageCode=120000000&versionId=4.3.2" target="_blank">
      <img src="https://waibaoh5.tingdao.com/%E5%BD%B1%E5%93%8D%E4%BA%BA%E7%94%9F%E7%9A%8475%E6%9D%A1%E8%B6%A3%E5%91%B3%E5%BF%83%E7%90%86%E5%AD%A6.png" alt="">
      <p>影响人生的75条趣味心理学</p>
      </a>
    </div>
  </div>
  <div class="mgapp">
    <div class="align-center">
    <div class="icon"></div>
    <div class="txt">打开芒果动听APP，收听更多精彩内容</div>
    </div>
    <div class="openapp">打开</div>
  </div>
</template>

<style>
a {color:#fff;text-decoration: none;}
.zhuanj {
  text-align: left;
  box-sizing: border-box;
  padding: 0 0 0 10px;
  font-size: 20px;
  width: 100%;
  color:#fff;
}
.zjlist {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
}
.zjlist .zjitem {
  width: 166px;
  height: 230px;
  text-align: left;
  margin-top: 20px;
  color:#fff;
}
.zjlist .zjitem img {
  width: 166px;
  height: 166px;
  border-radius: 6px;
}
.mgapp {
  height: 40px;
  margin-top: 40px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:#fff;
  padding:0 10px 20px 10px;
}
.mgapp .icon {
  background: url(./../images/logo.png) no-repeat 0 4px;
  width: 24px;
  height: 24px;
}
.mgapp .txt {
  font-size: 14px;
  opacity: 0.8;
  padding: 0 0 0 10px;
  text-align: left;
}
.mgapp .openapp {
  width: 56px;
  height: 26px;
  color: white;
  border-radius: 10px;
  background: #e25052;
  text-align: center;
  line-height: 26px;
}
.align-center {
  display: flex;
  align-items: center;
}
</style>
